<template>
    <div class="todoHeader">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="taskName" @keyup.enter="addTaskName">
    </div>
</template>
<script>


export default {
    Name:"MyHeader",
    data() {
        return {
            taskName:''
        }
    },
    methods: {
        addTaskName(){
            if(this.taskName == '') return
            this.addItem(this.taskName)
            this.taskName=''
        }
    },
    props:['addItem']
}
</script>
<style scoped>
    /* ##Header */
    .todoHeader{
        height: 50px;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        
    }

    .todoHeader input{
        width: 780px;
        height: 40px;
        display: block;
        line-height: 1.5;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        font-size: 16px;
        font-family: inherit;
        padding-left: 8px;
        
    }

</style>